<template>
<div>
  <div id="container">
    <div class="floating-div" style="width: 290px">
      <p style="margin-top: 5px"><span>一标六实数据表</span><span style="margin-left: 60px">共 <span style="color: #2f54eb">{{ dataInfo.plotCount }}</span> 个小区</span></p>
      <el-form  :model="dataInfo" id="floating-form" label-width="80px">
        <div style="width: 130px;height: 50px" @click="actualPopulation">
          <div style="width: 60px;height: 50px;">
            <img src="http://106.54.196.142:8888/group1/M00/00/08/CgAEBmaoUqiAAKi2AAAMeb7RxNk814.png" alt="" width="50px" height="50px">
          </div>
          <div style="width: 70px;height: 50px;margin-left: 60px;margin-top: -50px">
            <span>实有人口</span>
            <p style="margin-top: 3px;margin-left: 30px;color: #2f54eb">{{ dataInfo.residentsCount }}</p>
          </div>
        </div>
        <div style="width: 130px;height: 50px;margin-left: 130px;margin-top: -50px" @click="actualVehicles">
          <div style="width: 60px;height: 50px">
            <img src="http://106.54.196.142:8888/group1/M00/00/08/CgAEBmaoUreANwPXAAAOxg4Atno663.png" alt="" width="50px" height="50px">
          </div>
          <div style="width: 70px;height: 50px;margin-left: 60px;margin-top: -50px">
            <span>实有车辆</span>
            <p style="margin-top: 3px;margin-left: 30px;color: #2f54eb">{{ dataInfo.vehiclesCount }}</p>
          </div>
        </div>
        <div style="width: 130px;height: 50px" @click="actualBuild">
          <div style="width: 60px;height: 50px">
            <img src="http://106.54.196.142:8888/group1/M00/00/08/CgAEBmaoUuKAKTXmAAAQq0QNH9w455.png" alt="" width="50px" height="50px">
          </div>
          <div style="width: 70px;height: 50px;margin-left: 60px;margin-top: -50px">
            <span>实有房屋</span>
            <p style="margin-top: 3px;margin-left: 30px;color: #2f54eb">{{ dataInfo.estateCount }}</p>
          </div>
        </div>
        <div style="width: 130px;height: 50px;margin-left: 130px;margin-top: -50px" @click="physicalEquipment">
          <div style="width: 60px;height: 50px">
            <img src="http://106.54.196.142:8888/group1/M00/00/08/CgAEBmaoUpOAPxS-AAAMjIioBVk715.png" alt="" width="50px" height="50px">
          </div>
          <div style="width: 70px;height: 50px;margin-left: 60px;margin-top: -50px">
            <span>实有设备</span>
            <p style="margin-top: 3px;margin-left: 30px;color: #2f54eb">{{ dataInfo.devicesCount }}</p>
          </div>
        </div>
        <div style="width: 130px;height: 50px" @click="actualUnits">
          <div style="width: 60px;height: 50px">
            <img src="http://106.54.196.142:8888/group1/M00/00/08/CgAEBmaoUFeAC5moAAAJEJdSgTQ894.png" alt="" width="50px" height="50px">
          </div>
          <div style="width: 70px;height: 50px;margin-left: 60px;margin-top: -50px">
            <span>实有单位</span>
            <p style="margin-top: 3px;margin-left: 30px;color: #2f54eb">{{ dataInfo.unitCategoriesCount }}</p>
          </div>
        </div>
        <div style="width: 130px;height: 50px;margin-left: 130px;margin-top: -50px" @click="realPower">
          <div style="width: 60px;height: 50px">
            <img src="http://106.54.196.142:8888/group1/M00/00/08/CgAEBmaoUsWAcNaDAAAKasWgl3E360.png" alt="" width="50px" height="50px">
          </div>
          <div style="width: 70px;height: 50px;margin-left: 60px;margin-top: -50px">
            <span>实有力量</span>
            <p style="margin-top: 3px;margin-left: 30px;color: #2f54eb">0</p>
          </div>
        </div>
        <hr style="margin-top: 10px;">
        <!-- 给饼图的空间 -->
        <div id="myPieChart" style="width: 280px;height: 160px;margin-top: 5px"></div>
        <hr style="margin-top: 5px;">
        <!-- 给柱状图的空间 -->
        <div id="myBarChart" style="width: 280px;height: 250px;margin-top: 5px"></div>
        <hr style="margin-top: 5px;">
        <div style="width: 280px;height: 160px;margin-top: 10px">
          <div><p style="margin-top: 10px">实有设备 <span style="margin-left: 20px;color: #2f54eb">{{videoEquipment+ faceBayonet+ vehicleBayonet+ accessControlEquipment}}</span> </p></div>
          <div style="width: 100px;height: 50px;margin-top: 10px">
            <img src="http://106.54.196.142:8888/group1/M00/00/09/CgAEBmaqPeOAJmQmAAAFfQ9Cl4o076.png" alt="" width="50px" height="50px">
            <div style="width: 70px;height: 50px;margin-left: 60px;margin-top: -50px">
              <span>视频设备</span>
              <p style="margin-top: 3px;margin-left: 30px;color: #2f54eb">{{ videoEquipment }}</p>
            </div>
          </div>
          <div style="width: 100px;height: 50px;margin-top: -50px;margin-left: 135px">
            <img src="http://106.54.196.142:8888/group1/M00/00/09/CgAEBmaqPceANNK3AAAFRnisQ_w925.png" alt="" width="50px" height="50px">
             <div style="width: 70px;height: 50px;margin-left: 60px;margin-top: -50px">
               <span>人脸卡口</span>
               <p style="margin-top: 3px;margin-left: 30px;color: #2f54eb">{{ faceBayonet }}</p>
             </div>
          </div>
          <div style="width: 100px;height: 50px;margin-top: 10px">
            <img src="http://106.54.196.142:8888/group1/M00/00/09/CgAEBmaqPfyAax2jAAAF3P3KxLs630.png" alt="" width="50px" height="50px">
            <div style="width: 70px;height: 50px;margin-left: 60px;margin-top: -50px">
              <span>车辆卡口</span>
              <p style="margin-top: 3px;margin-left: 30px;color: #2f54eb">{{ vehicleBayonet }}</p>
            </div>
          </div>
          <div style="width: 100px;height: 50px;margin-top: -50px;margin-left: 135px">
            <img src="http://106.54.196.142:8888/group1/M00/00/09/CgAEBmaqPe6AM3RoAAAE_JGQF3g866.png" alt="" width="50px" height="50px">
            <div style="width: 70px;height: 50px;margin-left: 60px;margin-top: -50px">
              <span>门禁设备</span>
              <p style="margin-top: 3px;margin-left: 30px;color: #2f54eb">{{ accessControlEquipment }}</p>
            </div>
          </div>
        </div>
      </el-form>
    </div>
    <div class="search-bar" style="width: 500px;margin-top: 63px;margin-right: -25px;">
      <p>关键字搜索：<el-input v-model="input" placeholder="请输入内容" id="tipinput" style="width:300px;padding-right: 10px;"></el-input></p>
      <p><button id="fullscreenBtn" style="width: 80px;padding-left: 20px">全屏</button></p>
    </div>
  </div>

  <el-dialog title="地址及经纬度" :visible.sync="dialogFormVisible">
    <el-form ref="elForm" :model="dataForm" :rules="rules" size="small" label-width="70px" label-position="right"
             :disabled="!!isDetail">
      <el-form-item label="地点" :label-width="formLabelWidth">
        <el-input v-model="dataForm.kqLocation" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="经度" :label-width="formLabelWidth">
        <el-input v-model="dataForm.kqLongitude" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="维度" :label-width="formLabelWidth">
        <el-input v-model="dataForm.kqLatitude" autocomplete="off"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
    </div>
  </el-dialog>

</div>
</template>
<script>
import AMapLoader from "@amap/amap-jsapi-loader";
import {homeDate, listPlots} from "@/api/system/smart/plot";
import {getResidentTypeNumber} from "@/api/system/residents";
import {devicesTypeCount} from "@/api/system/devices";
import {roomTypeCount} from "@/api/system/smart/estate";

var polyEditor = "";
export default {
  created() {
    this.user = JSON.parse(sessionStorage.getItem('user'))
    this.residentsQuery4Count();
    this.devicesTypeCount();
    this.roomTypeCount();
  },
  name: "map-view",
  data () {
    return {
      dataForm: {
        kqLocation: undefined,
        kqLongitude: undefined,
        kqLatitude: undefined,
        cronkqAccredit: [],
        kqValidCardRange: undefined,
      },
      dialogFormVisible: false,
      formLabelWidth: '120px',

      isDetail: false,
      rules: {},

      lnglat: [],
      markers: [],
      position: {},
      input: "",
      longitude: "",
      latitude: "",

      domicileCount:0,
      foreignCount:0,
      abroadCount:0,
      temporaryCount:0,


      dataInfo: {
        residentsId: 0,
        vehiclesId: 0,
        estateId: 0,
        devicesId: 0,
        unitCategoriesId: 0,
        plotId: 0
      },
      data: {
        name:"我",
        pos:[110.677307, 37.655398]
      },
      plotList: [],
      userId: 0,
      user: {},
      residentType: [],
      newArray: [],
      devicesTypeList: [],
      roomTypeList: [],
      // 视频设备
      videoEquipment: 0,
      // 人脸卡口
      faceBayonet: 0,
      // 车辆卡口
      vehicleBayonet: 0,
      // 门禁设备
      accessControlEquipment: 0
    }
  },
  mounted() {
    this.initAMap();
    this.pieChart();
    this.barChart();
  },
  // unmounted() {
  //   this.map?.destroy();
  // },
  methods: {
    roomTypeCount() {
      this.userId = this.user.userId
      roomTypeCount(this.userId).then(res => {
        this.roomTypeList = res.data
      })
    },
    devicesTypeCount() {
      this.userId = this.user.userId
      devicesTypeCount(this.userId).then(res => {
        this.devicesTypeList = res.data
        if (this.devicesTypeList.length > 0){
          this.devicesTypeList.forEach(item => {
            if (item.deviceType == '视频设备') {
              this.videoEquipment = item.devicesNum
            } else if (item.deviceType == '人脸卡口') {
              this.faceBayonet = item.devicesNum
            } else if (item.deviceType == '车辆卡口') {
              this.vehicleBayonet = item.devicesNum
            } else if (item.deviceType == '门禁设备') {
              this.accessControlEquipment = item.devicesNum
            }
          })
        }
      })
    },
    barChart() {
      // 基于准备好的dom，初始化echarts实例
      let myBarChart = this.$echarts.init(document.getElementById("myBarChart"));
      // 绘制图表
      roomTypeCount(this.userId).then(res => {
        this.roomTypeList = res.data
        console.log(this.roomTypeList)
        let nameList = [];
        this.roomTypeList.forEach(item => {
          nameList.push(item.name)
        })
        console.log(nameList)
        myBarChart.setOption({
          title: {
            text: "实有房屋",
            left: "left",
          },
          xAxis: {
            max: 'dataMax'
          },
          yAxis: {
            type: 'category',
            data: nameList,
            inverse: true,
            animationDuration: 280,
            animationDurationUpdate: 280,
            max: 3 // only the largest 3 bars will be displayed
          },
          series: [
            {
              realtimeSort: true,
              type: 'bar',
              data: this.roomTypeList,
              label: {
                show: true,
                position: 'right',
                valueAnimation: true
              },
              barWidth: '40%' // 设置柱状图宽度为整个类目宽度
            }
          ],
          legend: {
            show: true
          },
          animationDuration: 3000,
          animationDurationUpdate: 3000,
          animationEasing: 'linear',
          animationEasingUpdate: 'linear'
        });
      })
    },
    pieChart() {
      // 基于准备好的dom，初始化echarts实例
      let myPieChart = this.$echarts.init(document.getElementById("myPieChart"));
      // 绘制图表
      getResidentTypeNumber(this.user.userId).then(res => {
        this.residentType = res.data
        myPieChart.setOption({
          title: {
            text: "实有人口",
            left: "left",
          },
          tooltip: {
            trigger: "item",
            formatter: "{a} <br/>{b}: {c}",
            // formatter: "{a} <br/>{b}: {c} ({d}%)",
          },
          legend: {
            top: "12%",
            left: "center",
          },
          series: [
            {
              name: '人员类型',
              type: 'pie',
              radius: '55%',
              top: "15%",
              // bottom: "1%",
              data: this.residentType,
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ],
        });
      })
    },
    // 实有人口
    actualPopulation(){
      this.$router.push('/community/mark/residents');
    },
    // 实有设备
    physicalEquipment(){
      this.$router.push('/community/mark/devices');
    },
    // 实有房屋
    actualBuild(){
      this.$router.push('/community/mark/estate');
    },
    // 实有单位
    actualUnits(){
      this.$router.push('/community/mark/units');
    },
    // 实有车辆
    actualVehicles(){
      this.$router.push('/community/mark/vehicles');
    },
    // 实有力量
    realPower(){
      alert('暂无')
    },
    getPlotList() {
      this.userId = this.user.userId
      listPlots(this.userId).then(res=>{
        this.plotList = res.data;
      })
    },
    initAMap() {
      window._AMapSecurityConfig = {
        securityJsCode: "377ac4cca4c27c4c12b5938eb9e4a6f8",
      };

      AMapLoader.load({
        key: "7a4a86da37b07d754f299478047b8c10", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ["AMap.AutoComplete", "AMap.PlaceSearch", "AMap.Geocoder", 'AMap.ToolBar',
          'AMap.Scale'],
        //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
      })
        .then((AMap) => {
          // this.addMarkers();

          this.map = new AMap.Map("container", {
            // 设置地图容器id
            viewMode: "3D", // 是否为3D地图模式
            zoom: 11, // 初始化地图级别
            // mapStyle: "amap://styles/darkblue",  // 地图样式，可以自定义
            resizeEnable: true,
            center: [121.441057,31.316334], // 初始化地图中心点位置
          });

          this.addMarkers();

          // 关键字查询
          this.searchMap();

          // 监听鼠标点击事件
          this.map.on("click", this.clickMapHandler);
          // 添加全屏按钮点击事件
          document.getElementById('fullscreenBtn').addEventListener('click', function () {
            if (this.map.getContainer().requestFullscreen) {
              this.map.getContainer().requestFullscreen();
            } else if (this.map.getContainer().mozRequestFullScreen) { /* Firefox */
              this.map.getContainer().mozRequestFullScreen();
            } else if (this.map.getContainer().webkitRequestFullscreen) { /* Chrome, Safari & Opera */
              this.map.getContainer().webkitRequestFullscreen();
            } else if (this.map.getContainer().msRequestFullscreen) { /* IE/Edge */
              this.map.getContainer().msRequestFullscreen();
            }
          }.bind(this)); // 使用bind确保this指向正确

        })
        .catch((e) => {
          console.log(e);
        });
    },
    addMarkers() {
      this.userId = this.user.userId
      listPlots(this.userId).then(res=>{
        this.plotList = res.data;

        this.plotList.forEach(item => {

          if (item.centerPoint == null){
            return
          }
          let slicePoint = item.centerPoint.split(",")
          let lng = slicePoint[0]
          let lat = slicePoint[1]
          let marker = new AMap.Marker({
            position: [lng,lat],
          });
          marker.setMap(this.map);
          this.markers.push(marker);
        });

      })
    },
    residentsQuery4Count(){
      homeDate().then(res=>{
        this.dataInfo = res.data
      })
    },
    // 点击地图事件获取经纬度，并添加标记
    clickMapHandler(e) {
      this.dataForm.kqLongitude = e.lnglat.getLng();
      this.dataForm.kqLatitude = e.lnglat.getLat();
      this.lnglat = [e.lnglat.getLng(), e.lnglat.getLat()];
      this.setMarker(this.lnglat);
      // 点击地图上的位置，根据经纬度转换成详细地址
      let geocoder = new AMap.Geocoder({});
      let that = this;
      geocoder.getAddress(this.lnglat, function (status, result) {
        if (status === "complete" && result.regeocode) {
          that.dataForm.kqLocation = result.regeocode.formattedAddress;
        } else {
        }
      });
      this.dialogFormVisible = true
      this.position = {
        longitude: e.lnglat.getLng(),
        latitude: e.lnglat.getLat(),
        address: that.address,
      };
      this.input = that.address; //把查询到的地址赋值到输入框
    },
    //  添加标记
    setMarker(lnglat) {
      let marker = new AMap.Marker({
        position: lnglat,
      });
      marker.setMap(this.map);
      this.markers.push(marker);
    },
    // 关键字查询
    searchMap () {
      // 搜索框自动完成类
      this.auto = new AMap.AutoComplete({
        input: "tipinput", // 使用联想输入的input的id
      });
      //构造地点查询类
      this.placeSearch = new AMap.PlaceSearch({
        map: this.map,
      });
      // 当选中某条搜索记录时触发
      this.auto.on("select", this.selectSite);
    },
    //选中查询出的记录
    selectSite (e) {
      if (e.poi.location) {
        this.placeSearch.setCity(e.poi.adcode);
        this.placeSearch.search(e.poi.name); //关键字查询
      } else {
        this.$message.error("查询地址失败，请重新输入地址");
      }
    },
    // 取消按钮
    cancel() {
      this.reset();
      const obj = { path: "/school/info" };
      this.$tab.closeOpenPage(obj);
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateSchool(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
            });
          } else {
            addSchool(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
            });
          }
        }
      });
    }
  },
};
</script>
<style scoped>
#container {
  width: 100%;
  height: 847px;
}
</style>
<style>
.right-floating-box {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  background-color: rgba(255, 255, 255, 0.3);
  padding: 10px;
  width: 250px; /* 设置悬浮框的宽度 */
  height: 750px; /* 设置悬浮框的高度 */
  z-index: 1000; /* 设置悬浮框的层级 */
}

.floating-div {
  position: absolute; /* 或者 position: fixed; */
  top: 0px; /* 调整 top 属性来控制距离顶部的距离 */
  left: 0px; /* 调整 left 属性来控制距离左侧的距离 */
  z-index: 999; /* 设置一个较高的 z-index 值，确保它在其他元素的上层显示 */
  //background-color: white; /* 可选：设置背景颜色 */
  background-color: rgba(255, 255, 255, 0.8); /* 使用 RGBA 来设置透明的白色背景 */
  padding: 10px; /* 可选：设置内边距 */
  border: 1px solid #ccc; /* 可选：设置边框 */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 可选：设置阴影 */
}
</style>
<style>
.search-bar {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 999; /* 设置一个较高的 z-index 值 */
  display: flex;
  justify-content: center;
  margin: 15px;
  background-color: rgba(255, 255, 255, 0.8); /* 透明的白色背景 */
  padding: 10px;
  border: 1px solid #ccc;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
/* 高德地图风格的全屏按钮样式 */
#fullscreenBtn {
  background-color: #1791fc; /* 高德地图常用的蓝色 */
  border: none; /* 移除边框 */
  color: white; /* 白色文字 */
  padding: 8px 16px; /* 适当的内边距 */
  text-align: center; /* 文字居中 */
  font-size: 14px; /* 字体大小，高德地图的按钮文字通常较小 */
  cursor: pointer; /* 鼠标悬停时显示指针 */
  border-radius: 4px; /* 圆角，高德地图的按钮圆角通常较小 */
  transition: background-color 0.3s, transform 0.3s; /* 平滑过渡效果，包括背景色和可能的变换（如缩放） */
  outline: none; /* 移除点击时的轮廓线 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 添加一些阴影效果，增强立体感 */
  /* 可选：添加图标，这里用伪元素模拟一个简单的图标 */
  position: relative;
  padding-left: 30px; /* 为图标留出空间 */
  width: 30px;
  height: 40px;
}

/* 鼠标悬停时的样式变化 */
#fullscreenBtn:hover {
  background-color: #007bff; /* 稍微深一点的蓝色 */
  transform: scale(1.05); /* 轻微放大效果，增强点击反馈 */
}
</style>














